<template>
	<view class="search-page">
		<!-- nav -->
		<tui-navigation-bar :isOpacity="false" color="#333" class="nav">
			<view class="nav-content">
				<!-- search -->
				<tui-searchbar placeholder="搜索" height="35px" padding="0" radius="5px" backgroundColor="#fff"
					:showLabel="false" focus showCancel cancelSize="17px" cancelColor="#198fff" inputBgColor="#F0F0F0"
					class="searchbar" @cancel="back" />
			</view>
		</tui-navigation-bar>
		<!-- tab -->
		<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="changeTab" isFixed :top="tabTop" :padding="10"
			:size="15" class="tabs" />
		<view class="content">
			<view class="history">
				<view class="header">
					<view class="title">搜索历史</view>
					<image src="@/static/icon/delete-grey.png" class="icon" @click="clickDelete" />
				</view>
				<view class="items">
					<tui-tag type="grey-black" padding="8px 10px" class="item" shape="circle" hover>最新公告</tui-tag>
					<tui-tag type="grey-black" padding="8px 10px" class="item" shape="circle" hover>薪资</tui-tag>
				</view>
			</view>
			<view class="find">
				<view class="header">
					<view class="title">搜索发现</view>
					<view class="right">
						<tui-icon name="refresh" color="#999" size="18" unit="px" class="t" />
						<view class="txt">换一换</view>
					</view>
				</view>
				<view class="find-wrap">
					<view class="item">
						<view class="title-icon ellipsis">国内疫情最新情况</view>
						<image src="@/static/icon/热.png" class="icon" />
					</view>
					<view class="item">
						<view class="title-icon ellipsis">麦当劳被爆使用过期食材</view>
						<image src="@/static/icon/新.png" class="icon" />
					</view>
					<view class="item">
						<view class="title-icon ellipsis">第三代 AirPods</view>
						<image src="@/static/icon/商.png" class="icon" />
					</view>
					<view class="item">
						<view class="title ellipsis">算法到底该怎么学</view>
					</view>
					<view class="item">
						<view class="title ellipsis">苹果发布会2021</view>
					</view>
					<view class="item">
						<view class="title ellipsis">windows 11 安卓</view>
					</view>
					<view class="item">
						<view class="title ellipsis">苹果 M1 Pro</view>
					</view>
					<view class="item">
						<view class="title ellipsis">双十一攻略</view>
					</view>
				</view>
			</view>
			<view class="hot" v-show="showHot">
				<view class="header">
					<view class="title">热门搜索</view>
					<view class="right"> </view>
				</view>
				<view class="hot-wrap">
					<!-- <view class="bg"></view> -->
					<view class="item">
						<view class="title ellipsis">
							<text class="number1">1</text>国内疫情最新情况
						</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number2">2</text>麦当劳被爆使用过期食材</view>
						<view class="hot-num">16.83万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number3">3</text>第三代 AirPods</view>
						<view class="hot-num">8.7万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">4</text>算法到底该怎么学</view>
						<view class="hot-num">8.6万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">5</text>苹果发布会2021</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">6</text>Windows 11 安卓</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">7</text>第三代 AirPods</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">8</text>算法到底该怎么学</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">9</text>苹果发布会2021</view>
						<view class="hot-num">18.26万</view>
					</view>
					<view class="item">
						<view class="title ellipsis"><text class="number-other">10</text>Windows 11 安卓</view>
						<view class="hot-num">18.26万</view>
					</view>
				</view>
			</view>
			<view class="show-hot" @click="showHot = !showHot">
				<tui-icon :name="showHot ? 'unseen' : 'eye'" color="#999" size="16" unit="px" class="i" />
				{{ showHot ? "隐藏" : "显示" }}热门榜单
			</view>
			<view class="help"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabTop: 88,
				tabs: [{
						name: "综合",
					},
					{
						name: "消息",
					},
					{
						name: "云文件",
					},
					{
						name: "应用",
					},
					{
						name: "联系人",
					},
				],
				currentTab: 0,
				showHot: true,
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				uni.getSystemInfo({
					success: (res) => {
						this.tabTop = res.statusBarHeight + 44;
						this.moreTop = (res.statusBarHeight + 50) + "px";
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickDelete() {
				uni.showModal({
					content: "确认清空全部搜索历史？",
				});
			},
			changeTab(v) {
				this.currentTab = v.index;
			},
		},
	};
</script>

<style lang="scss">
	@import "./search.scss";
</style>
